<template>
  <div class="search-results">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      正在搜索...
    </div>

    <!-- 错误信息 -->
    <div v-else-if="error" class="error">
      {{ error }}
    </div>

    <!-- 无结果提示 -->
    <div v-else-if="results.length === 0" class="no-results">
      暂无搜索结果
    </div>

    <!-- 搜索结果列表 -->
    <div v-else class="results-list">
      <div 
        v-for="music in results" 
        :key="music.id"
        class="music-item"
      >
        <img 
          :src="music.cover" 
          :alt="music.title"
          class="music-cover"
        >
        <div class="music-info">
          <h3 class="music-title">{{ music.title }}</h3>
          <p class="music-artist">{{ music.artist }}</p>
          <p class="music-duration">{{ formatDuration(music.duration) }}</p>
        </div>
        <div class="music-actions">
          <button 
            class="action-button play"
            @click="handlePlay(music)"
          >
            播放
          </button>
          <button 
            class="action-button add"
            @click="handleAddToPlaylist(music)"
          >
            添加到播放列表
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Music } from '@/stores/player'
import { addToPlaylist } from '@/api/music'
import { usePlayerStore } from '@/stores/player'

const props = defineProps<{
  loading: boolean
  results: Music[]
  error: string
}>()

const playerStore = usePlayerStore()

// 格式化时长
const formatDuration = (seconds: string): string => {
  const totalSeconds = parseInt(seconds)
  const minutes = Math.floor(totalSeconds / 60)
  const remainingSeconds = totalSeconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 播放音乐
const handlePlay = (music: Music) => {
  playerStore.playMusic(music)
}

// 添加到播放列表
const handleAddToPlaylist = async (music: Music) => {
  try {
    const result = await addToPlaylist(music.id)
    if (result.success) {
      // 可以添加一个提示
      console.log('添加成功')
    } else {
      console.error('添加失败:', result.message)
    }
  } catch (error) {
    console.error('添加到播放列表失败:', error)
  }
}
</script>

<style scoped lang="scss">
.search-results {
  background: color-mix(in srgb, var(--bgc-color-2) 40%, transparent);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  padding: 24px;
}

.loading,
.error,
.no-results {
  text-align: center;
  padding: 40px;
  color: var(--primary-color);
  font-size: 1.1em;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.music-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bgc-color-2) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-color) 10%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    background: color-mix(in srgb, var(--theme-color) 10%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
}

.music-cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.music-info {
  flex: 1;
  margin-left: 16px;
}

.music-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.music-artist {
  margin: 4px 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--primary-color) 70%, transparent);
}

.music-duration {
  margin: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--primary-color) 60%, transparent);
}

.music-actions {
  display: flex;
  gap: 8px;
}

.action-button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.action-button.play {
  background: var(--theme-gradient);
  color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-color) 20%, transparent);
}

.action-button.play:hover {
  background: linear-gradient(145deg, 
    color-mix(in srgb, var(--theme-color) 95%, white),
    var(--theme-color)
  );
  transform: translateY(-2px);
}

.action-button.add {
  background: color-mix(in srgb, var(--theme-color) 10%, transparent);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--theme-color) 20%, transparent);
}

.action-button.add:hover {
  background: color-mix(in srgb, var(--theme-color) 15%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .music-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .music-info {
    margin-left: 0;
  }
  
  .music-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>